<template>

  <NuxtLayout name="manage-layout">
    <template #main>

      <div class="min-h-dvh flex justify-center">

        <div class="card bg-base-100 w-11/12 shadow-xl">
          <div class="card-body">
            <h4 class="card-title">商品类型列表</h4>
            <div class="stats shadow w-56">
              <div class="stat">
                <div class="stat-figure text-secondary cursor-pointer" @click="showFormModal(null)">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                       stroke="currentColor" class="size-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
                  </svg>
                </div>
                <div class="stat-title">数据量</div>
                <div class="stat-value">{{ tableData.total }}</div>
                <div class="stat-desc">共{{ tableData.pages }}页数据</div>
              </div>
            </div>


            <div class="flex flex-col gap-2">
              <div class="flex flex-wrap gap-6">
                <div class="form-control">
                  <label class="label">
                    <span class="label-text text-sm font-semibold">类型名称</span>
                  </label>
                  <input type="text" v-model="searchForm.name" placeholder="请输入类型名称"
                         class="input input-md input-bordered"/>
                </div>
              </div>
            </div>

            <div class="flex">
              <button class="btn btn-square btn-outline btn-md btn-info" @click="loadData()"
                      title="查询">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                     stroke-width="1.5"
                     stroke="currentColor" class="size-6">
                  <path stroke-linecap="round" stroke-linejoin="round"
                        d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
                </svg>
              </button>
            </div>




            <div class="card bg-base-100 w-full shadow-xl">
              <div class="card-body">
                <div class="overflow-x-auto">
                  <table class="table">
                    <thead>
                    <tr>
                      <th>类型名称</th>
                      <th>创建时间</th>
                      <th></th>
                    </tr>
                    </thead>
                    <tbody>

                    <tr v-for="item in tableData.list" class="hover">
                      <td>{{ item.name }}</td>
                      <td>{{ item.ct }}</td>
                      <td>
                        <button class="btn btn-xs mx-1" @click="showDetailsModal(item.id)" title="查看">
                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                               stroke="currentColor" class="size-6">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                  d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/>
                            <path stroke-linecap="round" stroke-linejoin="round"
                                  d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
                          </svg>
                        </button>
                        <button class="btn btn-xs mx-1" @click="showFormModal(item.id)" title="编辑">
                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                               stroke="currentColor" class="size-6">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                  d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/>
                          </svg>
                        </button>
                        <button class="btn btn-xs mx-1" @click="del(item.id)" title="删除">
                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                               stroke="currentColor" class="size-6">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                  d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/>
                          </svg>
                        </button>
                      </td>
                    </tr>

                    </tbody>
                  </table>
                </div>
              </div>
            </div>

            <div class="card-actions justify-center mt-6">
              <button @click="toPage(item)"
                      :class="'join-item btn-xs btn' + (item === searchForm.page ? ' btn-neutral ' : '')"
                      v-for="item in tableData.pagination">{{ item }}
              </button>
            </div>
          </div>
        </div>

<!--        详情弹出层-->
        <dialog-modal ref="detailsDialogModalRef">
          <template #main>
            <div class="form-control">
              <label class="label">
                <span class="label-text font-semibold">类型名称</span>
              </label>
              <span class="input input-bordered">{{form.name}}</span>
            </div>
          </template>
          <template #footer></template>
        </dialog-modal>

<!--        编辑弹出层-->
        <dialog-modal ref="formDialogModalRef">
          <template #main>
            <div class="form-control">
              <label class="label">
                <span class="label-text font-semibold">类型名称</span>
              </label>
              <input type="text" placeholder="请输入类型名称" v-model="form.name" class="input input-bordered"/>
            </div>
          </template>
          <template #footer>
            <div>
              <button class="btn bg-green-400 hover:bg-green-500 text-white" @click="submitForm()">提交</button>
            </div>
          </template>
        </dialog-modal>
      </div>
    </template>
  </NuxtLayout>


</template>

<script setup>

import {httpDel, httpGet, httpPost} from "~/utils/http/http-helper.js";
import {generatePaginationArray} from "~/utils/pagination/index.js";
import {notificationError, notificationSuccess, notificationWarning} from "~/utils/notification/index.js";
import DialogModal from "../../../components/dialogModal.vue";

definePageMeta({
  index: 'manage-xxx',
})
const formDialogModalRef = ref()
const detailsDialogModalRef = ref()

const searchForm = ref({
  page: 1,
  size: 10,
})
const tableData = ref({
  list: [],
  total: 0,
  pages: '',
  pagination: []
})

const form = ref({})
const detailsData = ref()

/**
 * 初始化表单
 */
function initForm() {
  form.value = {}
  detailsData.value = null
}

/**
 * 展示详情弹出层
 * @param id  主键ID null则为新增
 */
function showDetailsModal(id) {
  httpGet('/api/goods-types/' + id).then(resp => {
    if (!resp.success) {
      notificationError(resp.msg)
      return
    }
    const data = resp.data
    detailsData.value = data
    detailsDialogModalRef.value.showDialogModal('查看')
  })
}

/**
 * 关闭详情弹出层
 */
function closeDetailsModal() {
  detailsDialogModalRef.value.closeDialogModal()
  initForm()
}

/**
 * 关闭表单弹出框
 */
function closeFormModal() {
  formDialogModalRef.value.closeDialogModal()
  initForm()
}

/**
 * 表单提交
 * 新增或者更新
 */
function submitForm() {
  if (detailsData.value === null) {
    // 新增
    httpPost('/api/goods-types', form.value).then(resp => {
      if (resp.success) {
        notificationSuccess('添加商品类型成功')
        closeFormModal()
        loadData()
      } else {
        notificationError(resp.msg)
      }
    })
  } else {
    // 更新
    httpPost('/api/goods-types/' + detailsData.value.id, form.value).then(resp => {
      if (resp.success) {
        notificationSuccess('编辑商品类型成功')
        closeFormModal()
        loadData()
      } else {
        notificationError(resp.msg)
      }
    })
  }
}

if (process.client) {
  loadData()
}

/**
 * 加载分页数据
 */
function loadData() {
  httpGet('/api/goods-types', searchForm.value).then(resp => {
    console.log(resp)
    if (!resp.success) {
      notificationError(resp.msg)
      return
    }
    const data = resp.data
    // 数据总数
    const total = data.totalElements
    tableData.value.list = data.content
    tableData.value.total = total
    tableData.value.pages = data.pages
    // 当前页码
    const currentPage = searchForm.value.page
    const pageSize = searchForm.value.size
    const pagination = generatePaginationArray(total, pageSize, currentPage); // 生成分页数组
    tableData.value.pagination = pagination
  })
}

/**
 * 跳转到某页
 * @param selectedPage  页码
 */
function toPage(selectedPage) {
  searchForm.value.page = selectedPage
  loadData()
}

/**
 * 展示模态框
 * @param id  主键ID null则为新增
 */
function showFormModal(id) {
  initForm()
  if (null !== id) {
    httpGet('/api/goods-types/' + id).then(resp => {
      if (!resp.success) {
        notificationError(resp.msg)
        return
      }
      const data = resp.data
      detailsData.value = data
      form.value = data
      formDialogModalRef.value.showDialogModal('修改类型')
    })
  } else {
    formDialogModalRef.value.showDialogModal('添加类型')
  }
}

/**
 * 删除
 * @param id  主键ID
 */
function del(id) {
  httpDel('/api/goods-types/' + id).then(resp => {
    if (resp.success) {
      notificationSuccess('删除成功')
      loadData()
    } else {
      notificationError(resp.msg)
    }
  })
}


</script>

<style scoped>

</style>